import * as THREE from 'three';
import { ThreeRender } from '@/components/Warm/SDK/three';
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { GlitchPass } from "three/examples/jsm/postprocessing/GlitchPass.js";
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
//import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
//import { Utils } from '@/common/utils';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
//@ts-ignore
import d from '@/assets/background/sh.jpg';

type MusicConfigType = {
    isOpenGUI?: boolean,
    useCanvasHeightAndWidth?: boolean
}

export class Pass extends ThreeRender {
    private composer: EffectComposer | null = null;
    private post: GlitchPass | null = null;
    private rectangle: THREE.Mesh | null = null;
    private controls: OrbitControls;

    constructor(el: Element, config?: MusicConfigType) {
        super(el, { useCanvasHeightAndWidth: !!config?.useCanvasHeightAndWidth });
        //this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.setLight();
        this.setPostPass();
        this.animate();
        this.setCamera();
    }

    private setLight() {
        this.scene.add(new THREE.AmbientLight(0xcccccc));
        let light = new THREE.PointLight(0xffffff, 1);
        this.scene.add(light);
    }

    protected updateRenderer() {
        this.checkRender(() => {
            const { fixHeight, fixWidth } = this.getHeightAndWidth();
            (this.camera as any).aspect = fixWidth / fixHeight;
            (this.camera as any).updateProjectionMatrix();
            this.renderer!.setSize(fixWidth, fixHeight);
            this.renderer!.setPixelRatio(window.devicePixelRatio);

            if (this.rectangle) {
                
            } else {
                const geometry = new THREE.PlaneGeometry(fixWidth, fixHeight);
                const material = new THREE.MeshBasicMaterial({
                    map: new THREE.TextureLoader().load(d),
                    side: THREE.DoubleSide
                });
                this.rectangle = new THREE.Mesh(geometry, material);
                this.rectangle.rotateY(-Math.PI / 2);
                this.rectangle.position.y = 305;
                this.scene.add(this.rectangle);
            }
        });
    }

    private setCamera() {

        this.camera!.position.set(-705, 0, 0);

        this.camera!.lookAt(0, 0, 0);
    }

    private setPostPass() {
        this.composer = new EffectComposer(this.renderer);

        let renderScene = new RenderPass(this.scene, this.camera);

        const { height, width } = this.getHeightAndWidth();

        const outlinePass = new OutlinePass(new THREE.Vector2(width, height), this.scene, this.camera);

        this.post = new GlitchPass();

        this.composer.addPass(renderScene);

        this.composer.addPass(this.post);

        this.composer.addPass(outlinePass);
    }

    private animate() {
        this.composer!.render();
        //this.renderer.render(this.scene, this.camera)
        requestAnimationFrame(this.animate.bind(this));
    }
}